<template>
    <div>
        <div class="img-click" :class="theme()">
            <h3>图片点击验证</h3>
            <div>
                <img class="img" :src="imgSrc" @click="imgClick">
            </div>
            <p class="error" v-if="!this.$store.state.validation">点击错误</p>
        </div>
    </div>
</template>

<script>
import theme from '@/mixins/theme.js'
export default {
  mixins: [theme],
    data() {
        return {
            imgSrc: ''
        }
    },
    methods: {
        imgClick(e) {
            //let data=Math.ceil(e.offsetX/2)+'_'+Math.ceil(e.offsetY/2);
            this.errorShow=false;
            let data=e.offsetX+'_'+e.offsetY;
            //保存验证值
            this.$store.dispatch('save_value',data);
            //返回index
            this.$router.push('/'+this.$store.state.appid+'/'+this.$store.state.operation+'/'+this.$store.state.theme);
        }
    },
    created() {
        this.$ajax('getimg_click', { "appid": this.$store.state.appid, "operation": this.$store.state.operation, "identifying": this.$store.state.identifying }, (res) => {
            this.imgSrc = 'data:image/png;base64,' + res.data.data;
        })
    }
}
</script>

<style scoped>
.theme1{
  background:rgba(88, 79, 96, 0.498039215686275);
}
.theme1 h3{
  color:#fff;
}

.img-click {
    box-sizing: border-box;
    position:absolute;
    width:70%;
    padding:15px 0 40px 0;
    /*border: 1px solid #ccc;*/
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.img {
    width: 100px;
    height: 100px;
}
  .error{
    position:absolute;
    bottom:10px;
    width:100%;
    font-size:12px;
    text-align:center;
    color:red;
  }
</style>

